import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {applyMiddleware, createStore } from 'redux';
import { createLogger } from 'redux-logger';

import { connect, Provider } from 'react-redux'

import { Reducers } from './reducers'
import {actions} from './action'


//纯Redux
const Counter = ({ value, onIncrement, onDecrement }) => (
  <div>
    <h1>{value}</h1>
    <button onClick={onIncrement}>+</button>
    <button onClick={onDecrement}>-</button>
  </div>
);

const reducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT': return state + 1;
    case 'DECREMENT': return state - 1;
    default: return state;
  }
};

let store = createStore(reducer);

let next = store.dispatch;
store.dispatch = (action)=>{
  console.log('dispatching', action);
  next(action);
  console.log('next state', store.getState());
}


const logger = createLogger();

store = createStore(
  reducer,
  52,
  applyMiddleware(logger)
);






const render = () => {
  ReactDOM.render(
    <Counter
      value={store.getState()}
      onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
      onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
    />,
    document.getElementById('root')
  );
};

render();
store.subscribe(render);

